<template>
  <!--  -->

  <el-row>
    <el-col :span="24">
      <div
        ref="trendchart"
        class="chart"
      />
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import { flowDetail, getFlow, getName, getPieChartData } from '@/apis/netflow.js'

const route = useRoute()

const trendchart = ref(null)

const { timeRange } = inject('timeRange')
let myTrendchart = null
const init = () => {
  const params = {
    ...route.query,
    limit: 999,
    page: 1
  }
  if (timeRange.value.length === 2) {
    params.startDate = timeRange.value[0]
    params.endDate = timeRange.value[1]
  }
  getPieChartData(params).then((result) => {
    const xData = []
    const serData = []
    for (let i = 0; i < result.date.length; i++) {
      xData.push(result.date[i].key)
      serData.push(result.date[i].value)
    }
    if (!myTrendchart) {
      myTrendchart = echarts.init(trendchart.value)
    }
    myTrendchart.setOption({
      title: { text: name },
      xAxis: { type: 'category', data: xData },
      yAxis: { type: 'value' },
      series: [{ data: serData, type: 'line' }]
    })
    window.onresize = function () {
      myTrendchart.resize()
    }
  }).catch(() => {
    if (!myTrendchart) {
      myTrendchart = echarts.init(trendchart.value)
    }
    myTrendchart.setOption({
      title: { text: name },
      xAxis: { type: 'category', data: [0] },
      yAxis: { type: 'value' },
      series: [{ data: [0], type: 'line' }]
    })
    window.onresize = function () {
      myTrendchart.resize()
    }
  })
}

watch(timeRange, () => {
  init()
})
onMounted(() => {
  init()
})

</script>

<style scoped lang="scss">
.chart {
  min-height: 300px;
  background-color: #fff;
}

</style>
